<template>
<div class="reg">
    <top></top>

    <div class="nav-logo flex">
        <router-link to="/">
            <img src="@/assets/logo/logo-login.png" alt="" width="180">
        </router-link>
    </div>

    <div class="reg-content">
        <router-link to="/enterprise-register" class="goRegistered">企业注册 <i class="icon-right"></i></router-link>
        <h3>个人注册</h3>
        <div class="tab-nav">
            <span :class="tab_type==1 ? 'active' : ''" @click="tab_type=1">手机注册</span>
            <span :class="tab_type==2 ? 'active' : ''" @click="tab_type=2">邮箱注册</span>
        </div>

        <div class="tab-content">
            <div class="form-line" v-if="tab_type==1">
                <div class="input-line">
                    <el-select v-model="reg.areaCode" placeholder="请选择区号">
                        <el-option label="086" value="086"></el-option>
                        <el-option label="886" value="886"></el-option>
                    </el-select>
                    <input type="text" v-model="reg.phone" @keyup="inputChange" style="width:250px; border-left: 1px solid #E7E7E7;" maxlength="11" placeholder="请输入手机号" />
                </div>
            </div>

            <div class="form-line" v-if="tab_type==2">
                <div class="input-line">
                    <input type="text" v-model="reg.email" placeholder="请输入邮箱地址" />
                </div>
            </div>
            <div class="form-line">
                <div class="input-line">
                    <input type="text" v-model="reg.validCode" maxlength="6" placeholder="请输入验证码" />
                    <em @click="sendCode" v-if="!identifyIsSend">获取验证码</em>
                    <em v-if="identifyIsSend">{{validCodeText}}</em>
                </div>
            </div>


            <div class="form-line">
                <div class="input-line">
                    <input type="password" v-model="reg.password" maxlength="22" placeholder="请输入账户密码" />
                </div>
            </div>

            <div class="form-line">
                <div class="input-line">
                    <input type="password" v-model="reg.confirmPassword" maxlength="22" placeholder="请确认密码" />
                </div>
            </div>

            <div class="form-line">
                <p><input type="checkbox" v-model="protocol"/>我已阅读并同意<a href="javascript:;" @click="dialogVisible = true">《用户服务协议》</a></p>
            </div>
            <div class="form-line">
                <button @click="register" class="btn-login">注册</button>
            </div>

            <p>已有账号，去 <router-link to="/login" class="btn-login">登录</router-link></p>
        </div>

    </div>

    <LoginFooter></LoginFooter>

    <el-dialog
        title="《用户服务协议》"
        :visible.sync="dialogVisible"
        width="750"
        :show-close = 'false'
        :before-close="handleClose">
        
        <div class="content">
            <p>甲乙双方就乙方加入甲方主办的“泉台人力银行”会员事宜达成以下协议：</p>
            <p>一、 乙方加入会员的条件：接受并遵守甲方的会员（信息）管理规定，即可成为“泉台人力银行”的正式会员。</p>
            <p>二、乙方在会员期内可以享受以下权限：</p>
            <p>1、通过会员渠道在“泉台人力银行”上登录、管理本单位的招聘信息，由甲方以尽快速度审核转储后，发布招聘信息在“泉台人力银行”的专门栏目（“企业招聘频道，搜索项等相关栏目”，但不包括需要另外再收费的栏目）。乙方的招聘信息须符合国家、省、市有关规定。</p>
            <p>2、通过会员渠道查询“泉台人力银行”的人才信息库。乙方所查取的应聘人员资料仅限本单位招聘使用，不得用作他途，并应尽妥善保管和处理的责任。甲方负有对入库资料进行基本审核的义务，但鉴于网络管理的实际困难，甲方不保证其资料的真实性、准确性。乙方在使用信息时，负有进一步核实的义务和责任。</p>
            <p>三、乙方违约事项：</p>
            <p>1、招聘内容不符合国家法律法规相关规定；</p>
            <p>2、向其他单位和个人转借、转让、共享会员权限，或代发、代查招聘、应聘信息；</p>
            <p>3、将“泉台人力银行”会员资格用于中介、赢利或不正当活动；</p>
            <p>4、乙方在会员资格期内因各种原因引起的运营中止；</p>
            <p>5、乙方执照变更而未及时送甲方备案；</p>
            <p>6、乙方涉及重要事项（如地址、联系方式等）变动而未及时修改会员信息。</p>
            <p>甲方对以上违约行为有权予以纠正直至中止服务，责任由乙方自负。</p>
            <p>四、乙方因用户名和密码保管不善，导致会员资格被第三方冒（盗）用，责任由乙方自负。为保护双方合法权益，任何一方发现该类问题后均有义务及时采取修补措施，并且甲方有权暂时冻结乙方权限。</p>
            <p>五、其他事项</p>
            <p>1、如遇不可抗因素（如电信、电力中断等）导致甲方服务中断或故障，不在甲方的责任范围，但甲方应善尽及时修复的义务。</p>
            <p>2、甲方不保证招聘效果，例如：招聘职位访问量，应聘人员多少及是否招聘到合适人员。</p>
            <p>3、因为招聘信息的公开性，甲方不保证非甲方网站来复制抄录乙方信息，甲方可配合乙方追述外网抄录信息之责任。</p>
            <p>六、本协议一式两份，双方各执一份，经双方正面签字盖章后生效。（此为背面）</p>
            <p>七、经友好协商未能达成共识的，双方可提交泉州任何一法院进行仲裁解决。</p>
        </div>
        
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false; protocol = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false; protocol = true">确 定</el-button>
        </span>
</el-dialog>
</div>
</template>

<script>
    import LoginFooter from '@/views/components/footer/login-footer'
    import top from '@/views/components/header/top'
    import { sendValidCode } from '@/api/register'
    import { register } from '@/api/register'
export default {
    name: "register",
    data() {
        return {
            tab_type: 1,
            check : false,
            select : false,
            protocol : false,
            identifyIsSend: false,
            dialogVisible: false,
            count: 60,
            validCodeText: '',
            timer: null,
            reg:{
                clientId: "web",
                confirmPassword: "",
                email: "",
                password: "",
                phone: "",
                type: 1,
                validCode: "",
                areaCode: '086'
            },
            code:{
                'type': 1,
                'scene': 'register',
                'phone': '',
                'email': ''
            }
        };
    },
    components:{top, LoginFooter},

  methods: {
    handleClose(){},
    inputChange() { //输入框值改变
        this.reg.phone = this.reg.phone.replace(/[^\d]/g, '')
    },
    selected(){
        if(this.select){
            this.select = false;
        }else{
            this.select = true;
        }
    },

    register(){
        if(!this.protocol){

            this.$message({
                message: '请先浏览并同意《服务中心用户服务协议》',
                type: 'warning'
            });
            return
        }

        if(this.tab_type == 1){
            this.reg.email = '';
            this.reg.type = 1;
        }else{
            this.reg.phone = '';
            this.reg.type = 2;
        }
 
        register(this.reg).then(res => {
            if(res.resp_code == 0){
                this.msgSuccess(res.resp_msg);
                setTimeout(() => {
                    this.$router.push({ path: '/login' })
                }, 1500);
            }else{
                this.msgError(res.resp_msg);
            }
        }).catch(err => {
            this.loading = false
            console.log(err)
        })
    },
    sendCode(){
        if(this.tab_type == 1){
            this.code.phone = this.reg.phone;
            this.code.type = 1;
            this.code.areaCode = this.reg.areaCode;
            if(!this.code.phone){
                this.$message({
                    message: '请输入手机号',
                    type: 'warning'
                });
                return
            }

        }else{
            this.code.email = this.reg.email;
            this.code.type = 2;
            if(!this.code.email){
                this.$message({
                    message: '请输入邮箱',
                    type: 'warning'
                });
                return
            }
        }
        if(this.identifyIsSend){
            return;
        }
        sendValidCode(this.code).then(res => {
            if(res.resp_code == 0){
                this.$message({
                    message: res.resp_msg,
                    type: 'success'
                });
                this.identifyCountdown();
            }else{
                this.$message({
                    message: res.resp_msg,
                    type: 'warning'
                });
            }
        }).catch(err => {
            this.$message.error(err);
        })
    },

    // 验证倒计时
    identifyCountdown(){
        this.timer = setInterval( this._doCountdown , 1000 );
        this._doCountdown();
    },

    _doCountdown(){
        this.identifyIsSend = true;
        this.validCodeText = this.count +'s'
        if( this.count-- < 1 ){
            this.identifyIsSend = false;
            // this.validCodeText = '获取验证码';
            this.count = 60;
            return clearTimeout( this.timer );
        }
    }

  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    /deep/ .top{
        background: #3B4D66
    }
    .reg{
        width: 100%;
        height: auto;
        background-color: #fff;
        .nav-logo{
            width: 1200px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
        }
    }

.reg-content{
    width: 780px;
    height: 775px;
    background: #FFFFFF;
    box-shadow: 0px 6px 49px 0px #D9D9D9;
    border-radius: 6px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    .goRegistered{
        display: block;
        padding: 30px 30px 0;
        color: #777;
        font-size: 16px;
        text-align: right;
        i.icon-right{
            display: inline-block;
            width: 6px;
            height: 10px;
            background: url(../assets/image/icon-right.png) no-repeat;
        }
    }

    h3{
        height: 35px;
        font-size: 36px;
        font-weight: 400;
        color: #080808;
        line-height: 26px;
        text-align: center;
        margin-top: 10px;
    }

    .tab-nav{
        width: 270px;
        height: 40px;
        border-bottom: 1px solid #E7E7E7;
        margin-left: auto;
        margin-right: auto;
        margin-top: 65px;
        span{
            width: 50%;
            display: block;
            font-size: 16px;
            color: #777;
            line-height: 38px;
            float: left;
            text-align: center;
            cursor: pointer;

            &.active{
                color: #3DABC4;
                font-weight: bold;
                border-bottom: 2px solid #3DABC4;
            }
        }
    }

    .tab-content{
        margin-top: 40px;
        .form-line{
            width: 340px;
            margin-left: auto;
            margin-right: auto;
            .input-line{
                position: relative;
                width: 340px;
                height: 48px;
                background: #FFFFFF;
                border: 1px solid #E7E7E7;
                border-radius: 4px;
                margin-top: 20px;
                flex: 1;
                input{
                    width: 100%;
                    height: 46px;
                    line-height: 46px;
                    border: none;
                    text-indent: 15px;
                    outline: none;
                    font-size: 16px;
                    &::-webkit-input-placeholder {
                        color: #D3D3D3;
                    }
                    &:-moz-placeholder {
                        color: #D3D3D3;
                    }
                    &::-moz-placeholder {
                        color: #D3D3D3;
                    }
                    &:-ms-input-placeholder {
                        color: #D3D3D3;
                    }
                }
                >>>.el-select.el-select--medium{
                    float: left;
                }
                >>>.el-input--medium .el-input__inner {
                    text-align: center;
                    width: 80px;
                    height: 46px;
                    border: 0;
                }
                >>>.el-select .el-input .el-select__caret {
                    color: #BE485E;
                }
                em{
                    text-align: center;
                    width: 70px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #3DABC4;
                    font-style: normal;
                    position: absolute;
                    top: 15px;
                    right: 15px;
                    cursor: pointer;
                }
            }

            p{
                color: #9E9E9E;
                margin-top: 10px;
                text-align: left;
                a{
                   color: #9E9E9E;
                   font-weight: 400;
                   text-decoration: underline;
                }

                input{
                    margin-bottom: -6px;
                }
            }

            button,a{
                &.btn-login{
                    display: block;
                    width: 340px;
                    height: 48px;
                    line-height: 48px;
                    background: #3DABC4;
                    border-radius: 4px;
                    font-size: 16px;
                    font-weight: 400;
                    color: #FFFFFF;
                    text-align: center;
                    margin-top: 45px;
                    -webkit-transition: all 0.3s;
                    transition: all 0.3s;
                    &:hover{
                        background: #2f879b;
                    }
                }
            }
        }

        p{
            text-align: center;
            margin-top: 80px;
            color: #9E9E9E;

            a{
                font-weight: bold;
                color: #3EABC4;
            }
        }
    }
}
footer{
    // position: relative;
    margin-top: 100px;
    margin-bottom: 16px;
}

>>>.el-dialog{
    .el-dialog__title{
        display: block;
        text-align: center;
        padding-top: 30px;
    }

    .content{
        font-size: 14px;
        line-height: 1.8;
        padding: 30px;
        padding-top: 0;
        p{
            text-indent: 2em;
        }
    }
}
</style>
